
/* GLOBALS */
.comments {
  width: 100%;
  /*自动适应父布局宽度*/
  height: 800px;
  overflow: auto;
  word-break: break-all;
  /*在ie中解决断行问题(防止自动变为在一行显示，主要解决ie兼容问题，ie8中当设宽度为100%时，文本域类容超过一行时，
当我们双击文本内容就会自动变为一行显示，所以只能用ie的专有断行属性“word-break或word-wrap”控制其断行)*/
}
.divcss5 {
  color: #F00;
  font-size: 20px;
  margin-top: 20px;
  position: absolute;
  width: 99%;
}
.switch {
  position: relative;
}

.switch label {
  width: 20%;
  height: 20%;
  position: relative;
  display: block;
}

.switch input {
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  opacity: 0;
  z-index: 100;
  position: absolute;
  width: 20%;
  height: 20%;
  cursor: pointer;
}

/* DEMO 1 */

.switch.demo1 {
  width: 100px;
  height: 100px;
  float: left;
}

.div-left-first {
  float: left;
}

.div-left {
  float: left;
  margin-left: -55px;
}

.switch.demo1 label {
  border-radius: 50%;
  background: #eaeaea;
  box-shadow:
          0 3px 5px rgba(0,0,0,0.25),
          inset 0 1px 0 rgba(255,255,255,0.3),
          inset 0 -5px 5px rgba(100,100,100,0.1),
          inset 0 5px 5px rgba(255,255,255,0.3);
}

.switch.demo1 label:after {
  content: "";
  top: -8%; right: -8%; bottom: -8%; left: -8%;
  z-index: -1;
  border-radius: inherit;
  background: #ddd;
  background: -moz-linear-gradient(#ccc, #fff);
  background: -ms-linear-gradient(#ccc, #fff);
  background: -o-linear-gradient(#ccc, #fff);
  background: -webkit-gradient(linear, 0 0, 0 100%, from(#ccc), to(#fff));
  background: -webkit-linear-gradient(#ccc, #fff);
  background: linear-gradient(#ccc, #fff);
  box-shadow:
          inset 0 2px 1px rgba(0,0,0,0.15),
          0 2px 5px rgba(200,200,200,0.1);
}

.switch.demo1 label:before {
  content: "";
  position: absolute;
  width: 20%;
  height: 20%;
  border-radius: inherit;
  left: 40%;
  top: 40%;
  background: #969696;
  background: radial-gradient(40% 35%, #ccc, #969696 60%);
  box-shadow:
          inset 0 2px 4px 1px rgba(0,0,0,0.3),
          0 1px 0 rgba(255,255,255,1),
          inset 0 1px 0 white;
}

.switch.demo1 input:checked ~ label {
  background: #dedede;
  background: -moz-linear-gradient(#dedede, #fdfdfd);
  background: -ms-linear-gradient(#dedede, #fdfdfd);
  background: -o-linear-gradient(#dedede, #fdfdfd);
  background: -webkit-gradient(linear, 0 0, 0 100%, from(#dedede), to(#fdfdfd));
  background: -webkit-linear-gradient(#dedede, #fdfdfd);
  background: linear-gradient(#dedede, #fdfdfd);
}

.switch.demo1 input:checked ~ label:before {
  background: #25d025;
  background: radial-gradient(40% 35%, #5aef5a, #25d025 60%);
  box-shadow:
          inset 0 3px 5px 1px rgba(0,0,0,0.1),
          0 1px 0 rgba(255,255,255,0.4),
          0 0 10px 2px rgba(0, 210, 0, 0.5);
}
